<template>
    <div class="check-plan">
        <div class="handle-btn">
            <a-button @click="batchOpen">批量开启计划</a-button>
            <a-button class="btn-marginL" @click="batchClose">批量关闭计划</a-button>
            <a-button class="btn-marginL" icon="plus" @click="handleAdd">新增计划</a-button>
        </div>
        <a-table
            size="middle"
            bordered
            rowKey="id"
            :columns="columns"
            :dataSource="dataSource"
            :pagination="ipagination"
            :loading="loading"
            class="j-table-force-nowrap"
            :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
            @change="handleTableChange">
            <span slot="statusName" slot-scope="text, record">
                <a-tag :color="getStatusColor(record.status)">{{text}}</a-tag>
            </span>
            <span slot="action" slot-scope="text, record">
              <a>{{record.status==0?'开启':'关闭'}}</a>
              <a-divider type="vertical" />
              <a>试跑</a>
              <a-divider type="vertical" />
              <a @click="logClick">日志</a>
              <a-divider type="vertical" />
              <a @click="detailClick(record.id)">详情</a>
              <a-divider type="vertical" />
              <a @click="editPlan(record.id)">编辑</a>
              <a-divider type="vertical"/>
              <a>删除</a>
            </span>
        </a-table>
        <add-plan-modal ref="modalForm" @modalFormOk="modalFormOk"></add-plan-modal>
    </div>
</template>
<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import AddPlanModal from './AddPlanModal'
const columns = [
  {
    title: '计划名称',
    dataIndex: 'planName',
  },
  {
    title: '资源存储类型',
    dataIndex: 'storageType'
  },
  {
    title: '数据库名称',
    dataIndex: 'databaseName',
  },
  {
    title: '执行周期',
    dataIndex: 'executionCycle'
  },
  {
    title: '创建时间',
    dataIndex: 'createTime'
  },
  {
    title: '状态',
    dataIndex: 'statusName',
    scopedSlots: {customRender: 'statusName'}
  },
  {
    title: '操作',
    scopedSlots: { customRender: 'action' },
    align: 'left',
    width: '100px'
  },
]
const dataSource = [
    {id:1,planName:'计划名一',storageType:'Hive',databaseName:'emr',executionCycle:255,createTime:'2021-08-21 00:00:00',statusName:'运行',status:1},
    {id:2,planName:'计划名二',storageType:'Hive',databaseName:'emr',executionCycle:244,createTime:'2021-08-21 00:00:00',statusName:'停止',status:0},
    {id:3,planName:'计划名三',storageType:'Hive',databaseName:'emr',executionCycle:244,createTime:'2021-08-21 00:00:00',statusName:'停止',status:0},
    {id:4,planName:'计划名四',storageType:'Hive',databaseName:'emr',executionCycle:244,createTime:'2021-08-21 00:00:00',statusName:'停止',status:0},
    {id:5,planName:'计划名五',storageType:'Hive',databaseName:'emr',executionCycle:244,createTime:'2021-08-21 00:00:00',statusName:'停止',status:0},
    {id:6,planName:'计划名六',storageType:'Hive',databaseName:'emr',executionCycle:244,createTime:'2021-08-21 00:00:00',statusName:'停止',status:0},
    {id:7,planName:'计划名七',storageType:'Hive',databaseName:'emr',executionCycle:244,createTime:'2021-08-21 00:00:00',statusName:'停止',status:0}
]
export default {
    name:'CheckPlan',
    mixins:[JeecgListMixin],
    components: {
        AddPlanModal
    },
    data(){
        return {
            columns,
            dataSource,
            url: {
                // list: "/sys/tenant/list",
                // delete: "/sys/tenant/delete",
                // deleteBatch: "/sys/tenant/deleteBatch"
            },
        }
    },
    mounted() {
        console.log(this.ipagination,'ipagination');
    },
    methods: {
        logClick(){
            this.$router.push({path:'/qualityManagement/CheckPlanLogList'})
        },
        batchOpen(){
            if(!this.selectedRowKeys.length){
                this.$message.error('请先选择要批量开启的计划')
                return
            }else{
                console.log(this.selectedRowKeys,'要批量开启的计划');
                this.onClearSelected()
            }
        },
        batchClose(){
            if(!this.selectedRowKeys.length){
                this.$message.error('请先选择要批量关闭的计划')
                return
            }else{
                console.log(this.selectedRowKeys,'要批量关闭的计划');
                this.onClearSelected()
            }
        },
        detailClick(id){
            this.$refs.modalForm.title = "校验计划详情";
            this.$refs.modalForm.formData.id=id
            this.$refs.modalForm.isDetail=true
            this.$refs.modalForm.edit();
        },
        editPlan(id){
            this.$refs.modalForm.title = "编辑校验计划";
            this.$refs.modalForm.formData.id=id
            this.$refs.modalForm.edit();                                                    
        },
        getStatusColor(code){
            switch(code) {
                case 0: return 'gray'
                break;
                case 1: return 'green'
                break;
            }
        },
        handleAdd() {
            this.$refs.modalForm.title = "新增校验计划";
            this.$refs.modalForm.add();
        },
    }
}
</script>
<style lang="less" scoped>
.check-plan{
    .handle-btn{
        text-align:right;
        .btn-marginL{
            margin-left:15px;
        }
    }
    .j-table-force-nowrap{
        margin-top:15px;
    }
}
</style>